<template>
    <el-container>
        <el-header>
            <el-menu :default-active="activeIndex" @select="handleSelect" class="el-menu-demo" mode="horizontal"
                size="mini">
                <template v-for="item in menus">

                    <el-menu-item :index="item.id" @click="JumpUrl(item)" size="mini" >
                        <router-link :to="item.url">
                            <span>   <component :is="item.icon"  class="menu_icon" style="vertical-align:text-top;" /></span>
                            <span slot="title"> {{ item.name }}</span>
                        </router-link>
                    </el-menu-item>
                </template>
                
                <!-- <span style="color:#909399;font-size:10px;float:right">
            访问次数:{{visitorLog.visitorTotal}}&nbsp;&nbsp;&nbsp;&nbsp;
            访问总人数：{{visitorLog.visitorTotalPeople}}
            <br />
            <a href="https://www.aliyundrive.com/sign/in" style="float:right" target="_blank">阿里云盘</a>
        </span> -->
            </el-menu>
        </el-header>
        <el-main>
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
            <!-- <keep-alive v-for="item in menus">
                <iframe ref="iframe" v-show="item.url==url" :src="item.url"
                    style="width: 100%; height: 820px; border: 1px #DBDBDB solid"></iframe>
            </keep-alive> -->
        </el-main>
        <el-footer>
            <div class="container" style="text-align: center; font-size: 12px;margin-top: 10px">
                <a href="https://beian.miit.gov.cn">蜀ICP备2022003701号-1</a> &copy;2020 - Utils - <a>首页</a>
            </div>
        </el-footer>
    </el-container>

</template>


<script>
    import { ref, toRefs, reactive, onMounted, onUnmounted } from 'vue'
    import JsonFormater from '../components/JsonFormater.vue'
    import router from '../../config/router.js'
    import { useRoute } from 'vue-router'
    export default {
        components: {
            JsonFormater
        },
        setup() {
            // console.log(window.location.hash.replace('#', '').split("/")[1]);
            const activeIndex = ref(window.location.hash.replace('#', '').split("/")[1])
            const menuData = reactive({
                visitorLog: {
                    visitorTotal: 0,
                    visitorTotalPeople: 0
                },
                menus: [
                    {
                        name: "Json格式化11",
                        id: 'json_format',
                        icon: "data-board",
                        url: "json_format",
                        children: []
                    }, {
                        name: "String处理",
                        id: 'entity_generator',
                        icon: "edit",
                        url: "entity_generator",
                        children: []
                    }
                    // , {
                    //     name: "Tools工具",
                    //     id: '3',
                    //     icon: "tools",
                    //     url: "/tools/EntityGenerator",
                    //     children: []
                    // }
                ],
                url: '/Tool/JSONFormat'
            });

            /*------s事件-------*/
            //点击菜单
            const JumpUrl = (row) => {
                menuData.url = row.url;
            }
            //菜单激活回调
            const handleSelect = (key, keyPath) => {
                //存在缓存
                //  localStorage.setItem('menuId', key);
            }

            /*------生命周期 钩子-------*/
            onMounted(() => {
                //从缓存中取出
                // activeIndex.value = localStorage.getItem('menuId');
            })
            return { activeIndex, ...toRefs(menuData), JumpUrl, handleSelect }
        }
    }

</script>